<template>
    <view class="content">
        <view id="upload">
            <img src="../../static/img/touxiang.png" v-if="!imgUrl" @click="openChooseImg">
            <img :src="imgUrl" v-else @click="openChooseImg">
            <text>上传头像</text>
        </view>
        <view>
            <view class="yitiao">
                <text class="biaoti">姓名</text>
                <input v-model="name" class="myinput" placeholder="请填写您的姓名" />
            </view>
            <view class="yitiao">
                <text class="biaoti">性别</text>
                <view>
                    <radio-group @change="mysex">
                        <label class="radio"><radio color="#F48FB1" class="myradio" value="男"/>男</label>
                        <label class="radio"><radio color="#F48FB1" value="女"/>女</label>
                    </radio-group>
                </view>
            </view>
            <view class="yitiao">
                <text class="biaoti">生日</text>
                <view>
                    <radio-group @change="myshengri" id="nongli">
                        <label class="radio"><radio color="#F48FB1" class="myradio" value="公历"/>公历</label>
                        <label class="radio"><radio color="#F48FB1" value="农历"/>农历</label>
                    </radio-group>
                    <picker id="riqi" mode="date" :value="mydate" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{mydate}}</view>
                    </picker>
                </view>

            </view>
            <view class="yitiao">
                <text class="biaoti">关系</text>
                <input class="myinput" v-model="guanxi" placeholder="请填写你们的关系" />
            </view>
            <view class="yitiao">
                <text class="biaoti">喜好</text>
                <input class="myinput" v-model="xihao" placeholder="请填写TA的喜好" />
            </view>
            <view class="yitiao" id="last">
                <text class="biaoti">提前通知我</text>
                <view>
                    <radio-group @change="mytongzhi">
                        <label class="radio"><radio color="#F48FB1" class="myradio" value="是"/>是</label>
                        <label class="radio"><radio color="#F48FB1" value="否"/>否</label>
                    </radio-group>
                </view>
            </view>
        </view>
        <button class="mini-btn" type="default" size="mini" @click="baocun">保存信息</button>
        <button class="mini-btn delete" type="default" size="mini" @click="delxinxi" v-if="jiekou==2">删除信息</button>
    </view>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: "addBirthday",
        data(){
            const currentDate = this.getDate({
                format: true
            });
            return{
                jiekou:'',
                name:'',
                sex:'',
                shengri:'',
                guanxi:'',
                xihao:'',
                tongzhi:'',
                date:'',
                mydate: '选择日期',
                index: 0,
                imgUrl:"",
                mytitle:'',
                mychaname:'',
                ID:''
            }
        },
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            console.log(option.title);
            //接口 ：1为添加接口，2为修改接口
            this.jiekou = option.title;
            console.log(option.name);
            //如果为查看详情页面
            if (option.title == 2){
                uni.request({
                    url: api.QUERYUSERBIRTHDAY,
                    method:'get',
                    data:{
                        name:option.name
                    },
                    success: (res) => {
                        console.log(res.data.data[0]);
                        this.name = res.data.data[0].name;
                        this.guanxi = res.data.data[0].Guanxi;
                        this.mydate = res.data.data[0].Nongli;
                        this.ID = res.data.data[0].Id
                    }
                });
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        methods:{
            //获取选中内容
            mysex(e){
                this.sex = e.detail.value
            },
            myshengri(e){
                this.shengri = e.detail.value
            },
            mytongzhi(e){
                this.tongzhi = e.detail.value
            },
            //添加或修改生日
            baocun(){
                console.log(this.name);
                console.log(this.sex);
                console.log(this.shengri);
                console.log(this.guanxi);
                console.log(this.xihao);
                console.log(this.tongzhi);
                // console.log()
                let jiequdate = this.mydate.slice(5,10);
                //添加生日
                if (this.jiekou == 1){
                    uni.request({
                        url: api.ADDBIRTHDAY,
                        method:'post',
                        data: {
                                "countday": 21,
                                "gongli": '公历'+jiequdate,
                                "guanxi": this.guanxi,
                                "name": this.name,
                                "nongli": '农历'+jiequdate,
                                "shengxiao": "兔",
                                "xingzuo": "天秤座"
                        },
                        success: (res) => {
                            console.log(res.data);
                            if (res.data.code === 200){
                                uni.showModal({
                                    title: '提示',
                                    content: '添加成功',
                                    duration:2000,
                                    success: function (res) {
                                        if (res.confirm) {
                                            // console.log('用户点击确定');
                                            uni.navigateTo({
                                                url: '/pages/index/birthdayGuanli'
                                            })
                                        } else if (res.cancel) {
                                            // console.log('用户点击取消');
                                            uni.navigateTo({
                                                url: '/pages/index/birthdayGuanli'
                                            })
                                        }
                                    }
                                });
                            }
                        }
                    });
                }else if(this.jiekou == 2){
                    //保存修改
                    uni.request({
                        url: api.UPDATEBIRTHDAY,
                        method:'post',
                        data: {
                            "id":this.ID,
                            "countday": 21,
                            "gongli": '公历'+jiequdate,
                            "guanxi": this.guanxi,
                            "name": this.name,
                            "nongli": '农历'+jiequdate,
                            "shengxiao": "兔",
                            "xingzuo": "天秤座"
                        },
                        success: (res) => {
                            console.log(res.data);
                            if (res.data.code === 200){
                                uni.showModal({
                                    title: '提示',
                                    content: '修改成功',
                                    success: function (res) {
                                        if (res.confirm) {
                                            // console.log('用户点击确定');
                                            uni.navigateTo({
                                                url: '/pages/index/birthdayGuanli'
                                            })
                                        } else if (res.cancel) {
                                            // console.log('用户点击取消');
                                            uni.navigateTo({
                                                url: '/pages/index/birthdayGuanli'
                                            })
                                        }
                                    }
                                });
                            }
                        }
                    });
                }
            },
            //日期选择器
            bindDateChange: function(e) {
                this.mydate = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            //上传头像
            openChooseImg(){
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
                    success: res=> {
                        console.log(res);
                        /*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
                        this.imgUrl=res.tempFilePaths[0];
                        console.log(this.imgUrl)
                    }
                });
            },
            //删除信息
            delxinxi(){
                uni.request({
                    url: api.DELBIRTHDAY,
                    method:'get',
                    data: {
                        id:this.ID
                    },
                    success: (res) => {
                        console.log(res.data);
                        if (res.data.code === 200){
                            uni.showModal({
                                title: '提示',
                                content: '删除成功',
                                duration:2000,
                                success: function (res) {
                                    if (res.confirm) {
                                        // console.log('用户点击确定');
                                        uni.navigateTo({
                                            url: '/pages/index/birthdayGuanli'
                                        })
                                    } else if (res.cancel) {
                                        // console.log('用户点击取消');
                                        uni.navigateTo({
                                            url: '/pages/index/birthdayGuanli'
                                        })
                                    }
                                }
                            });
                        }
                    }
                })
            },
        },
    }
</script>

<style>
    .content{
        width: 100%;
    }
    #upload{
        width: 100%;
        text-align: center;
        margin-top: 20rpx;
    }
    #upload>img{
        width: 148rpx;
        height: 148rpx;
        /*background: #D7D7D7;*/
        border: 4rpx solid #F7CDC4;
        border-radius: 50%;
        margin: auto;
    }
    #upload>text{
        /*border: 1px solid red;*/
        display: block;
        font-size: 30rpx;
        font-weight: 500;
        color: #999999;
        margin: 10rpx 0;
    }
    .i-input>.i-input-title{
        min-width: 20rpx;
    }
    .yitiao{
        margin: 40rpx 0 40rpx 50rpx;
        border-bottom: 1px solid #bdbdbd;
        height: 80rpx;
    }
    .biaoti{
        width: 100rpx;
        float: left;
        font-size: 34rpx;
    }
    .myinput{
        width: 300rpx;
        float: left;
    }
    label{
        margin-right: 50rpx;
    }
    #last>text{
        width: 200rpx;
    }
    #nongli{
        float: left;
    }
    #riqi{
        width: 200rpx;
        float: left;
        /*display: inline;*/
        /*margin-left: 50rpx;*/
        color: #F48FB1;
    }
    button{
        width: 400rpx;
        height: 88rpx;
        background: #F48FB1;
        border-radius: 44rpx;
        margin-left: 175rpx;
        text-align: center;
        line-height: 88rpx;
        color: white;
        font-size: 30rpx;
    }
    .delete{
        width: 400rpx;
        height: 88rpx;
        background: white;
        border: 1rpx solid #F48FB1;
        border-radius: 44rpx;
        margin-left: 175rpx;
        text-align: center;
        line-height: 88rpx;
        color: #F48FB1;
        font-size: 30rpx;
        margin-top: 10rpx;
    }
</style>